import React, { Component } from 'react'
import {
    StyleSheet,
    View,
    Text,
    Image,
    ScrollView,
    TouchableOpacity,
    TextInput,
    RefreshControl,
    TouchableWithoutFeedback,
    Platform,
    ActivityIndicator
} from 'react-native';
import Drawer from 'react-native-drawer';
import { Tree } from 'react-native-tree';
import { px2dp } from '../../utils/px2dp';
import {setSpText,setHW} from '../../component/ScreenUtil';
const Dimensions = require('Dimensions');
const { width, height } = Dimensions.get('window');
import Lessons from '../../component/Lessons';
import KnowledgeDetail from '../../component/KnowledgeDetail'
import NavigatorBar from '../../common/NavigationBar';
import { listPeriod, listTag, listSubject, searchCourse } from '../../api/home'
// 缓存数据
var cacheData = {
    'Lessons': {
        data: [],
        nextPage: 1,
        total: 0
    },
    'Knowledge': {
        data: [],
        nextPage: 1,
        total: 0
    }
}
class DrawerContent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            LessonsList: [],
            KnowledgeList: [],
            tabName: 'Lessons',
            searchText: '',
            isRefreshing: false,
            LessonsMore: false,
            KnowledgeMore: false,
            isLoading: false,
            noData: false
        };
    }
    tabHandle(item) {
        if(this.state.tabName == 'item') return;
        this.props.setTabName && this.props.setTabName(item);
        cacheData = {
            'Lessons': {
                data: [],
                nextPage: 1,
                total: 0
            },
            'Knowledge': {
                data: [],
                nextPage: 1,
                total: 0
            }
        }
        this.setState({
            tabName: item,
            [this.state.tabName + 'List']: [],
            [this.state.tabName + 'More']: true,
            searchText: '',
        },()=>{
            this.props.resetState && this.props.resetState();
            this._fetchData();
        });
        
    }
    // 渲染按钮
    renderLeftButton(image) {
        return <TouchableOpacity
            style={[global.CommonStyleSheet.NavLeftButton]}
            onPress={() => {
                this.props.navigation.goBack();
            }}>
            <Image
                style={{ width: 34, height: 34 }}
                source={image} />
        </TouchableOpacity>;
    }
    renderRightButton(image) {
        return <TouchableOpacity
            style={[global.CommonStyleSheet.NavLeftButton]}
            onPress={() => {
                this.props.navigation.goBack();
            }}>
            <Image
                style={{ width: 16, height: 14 }}
                source={image} />
        </TouchableOpacity>;
    }
    fliterSort() {
        this.props.openDrawer && this.props.openDrawer();
    }
    componentDidMount() {
        this._fetchData()
    }
    componentWillUnmount() {
        cacheData = {
            'Lessons': {
                data: [],
                nextPage: 1,
                total: 0
            },
            'Knowledge': {
                data: [],
                nextPage: 1,
                total: 0
            }
        }
        this.state = {
            LessonsList: [],
            KnowledgeList: [],
            tabName: 'Lessons',
            searchText: '',
            isRefreshing: false,
            LessonsMore: false,
            KnowledgeMore: false,
            isLoading: false,
            noData: false
        };
    }
    handleChangeText(text) {
        cacheData = {
            'Lessons': {
                data: [],
                nextPage: 1,
                total: 0
            },
            'Knowledge': {
                data: [],
                nextPage: 1,
                total: 0
            }
        }
        this.setState({
            [this.state.tabName + 'List']: [],
            [this.state.tabName + 'More']: true,
            searchText: text
        });
        // 延迟执行
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
            this._fetchData()
        }, 20)
    }
    _fetchData() {
        // 查询所有数据
        var LISTTAGS_ARY = [];
        if (this.props.TAGNAME && this.props.TAGNAME.length > 0) {
            LISTTAGS_ARY = this.props.TAGNAME.map(item => {
                return {
                    TAG_ID: item.key
                }
            })
        }
        var data = {
            sendData: {
                "SEARCHTYPE": this.state.tabName == 'Lessons' ? "1" : "2", // 搜索类型 1课程 2知识点精讲
                "COURSE_NAME": this.state.tabName == 'Lessons' ? this.state.searchText : "", // 课程关键字
                "TAGNAME": this.state.tabName == 'Knowledge' ? this.state.searchText : "", // 知识点关键字
                "SUBJECT": this.props.SUBJECT, //     学科
                "F_PERIOD_ID": this.props.F_PERIOD_ID, // 学段
                "LISTTAGS": this.state.tabName == 'Knowledge' ? LISTTAGS_ARY : [] // 知识点列表
            },
            page: cacheData[this.state.tabName] && cacheData[this.state.tabName].nextPage,
            rows: 10
        }
        global.log(data, '-------------------page');
        this.setState({
            isLoading: true
        });
        searchCourse(data).then(res => {
            global.log(res);
            cacheData[this.state.tabName].data = this.state[this.state.tabName + 'List'].concat(res.LIST);
            global.log(cacheData, 'cacheData------', this.state.tabName, 'this.state.tabName');
            cacheData[this.state.tabName].total = res.PAGINATION.TOTAL;
            var data = [...cacheData[this.state.tabName].data];
            
            
            if (this.state.tabName == 'Lessons') {
                setTimeout(()=>{
                    this.setState({
                        LessonsList: data,
                        isLoading: false,
                        noData: !data.length,
                        isRefreshing: false
                    });
                }, 500)
                global.log(1212, 'Lessons');
            }
            else {
                setTimeout(() => {
                    this.setState({
                        KnowledgeList: data,
                        isLoading: false,
                        noData: !data.length,
                        isRefreshing: false
                    });
                }, 500)
            }

        });
    }
    upDateFilter = () => {
        global.log(this.state.tabName, 'tabName------------')
        var That = this;
        cacheData = {
            'Lessons': {
                data: [],
                nextPage: 1,
                total: 0
            },
            'Knowledge': {
                data: [],
                nextPage: 1,
                total: 0
            }
        }
        this.setState({
            [this.state.tabName + 'List']: []
        }, () => {
            That._fetchData();
        })
    }
    render() {
        return (
            <View style={styles.appContainer}>
                <NavigatorBar
                    hide={true}
                    style={styles.navigatorBar}
                    leftButton={this.renderLeftButton(require('../../assets/imgs/back.png'))}
                />
                <View>
                    <View style={styles.tabWrapper}>
                        <TouchableOpacity style={[styles.tabNavItem, this.state.tabName == 'Lessons' && styles.tabActive]} onPress={() => this.tabHandle('Lessons')} >
                            <Text style={[styles.tabNavItemText, this.state.tabName == 'Lessons' && styles.textActive]}>系列课</Text>
                            <View style={[styles.line, this.state.tabName == 'Lessons' && styles.lineActive]}></View>
                        </TouchableOpacity>
                        <TouchableOpacity style={[styles.tabNavItem, this.state.tabName == 'Knowledge' && styles.tabActive]} onPress={() => this.tabHandle('Knowledge')}>
                            <Text style={[styles.tabNavItemText, this.state.tabName == 'Knowledge' && styles.textActive]}>知识点精讲</Text>
                            <View style={[styles.line, this.state.tabName == 'Knowledge' && styles.lineActive]}></View>
                        </TouchableOpacity>
                    </View>
                    <TouchableOpacity
                        style={[global.CommonStyleSheet.NavLeftButton, styles.backIcon]}
                        onPress={() => {
                            this.props.navigation.goBack();
                        }}>
                        <Image
                            style={{ width: 34, height: 34 }}
                            source={require('../../assets/imgs/back.png')} />
                    </TouchableOpacity>
                </View>
                {/* 搜索 */}
                <View style={styles.searchWrapper}>
                    <View style={styles.searchInput}>
                        <Image style={styles.searchIcon} source={require('../../assets/imgs/icon_search.png')} />
                        <TextInput ref="searchInput" value={this.state.searchText} returnKeyType={'search'} placeholder={this.state.tabName == 'Lessons' ? "按课程名称关键字搜索" : '按知识点关键字搜索'} underlineColorAndroid='transparent' style={styles.textInputStyle} onChangeText={(text) => this.handleChangeText(text)} placeholderTextColor={'#CCCCCC'}></TextInput>
                    </View>
                    <TouchableOpacity onPress={() => this.fliterSort()} style={styles.filterSort}>
                        <Text style={styles.screenText}>筛选</Text>
                        <Image style={styles.dropDownIcon} source={require('../../assets/imgs/academic_filter.png')} />
                    </TouchableOpacity>
                </View>
                {/* 搜索 end */}
                <ScrollView
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.isRefreshing}
                            onRefresh={() => this._onRefresh()}
                            tintColor="#FF8A00"
                            // title="加载中..."
                            titleColor="#ddd"
                            colors={['#FF8A00']}
                            progressBackgroundColor="#ffffff"
                        />
                    }
                    onScroll={(event) => this._onScroll(event)}
                    scrollEventThrottle={20}
                    showsVerticalScrollIndicator={false}
                >
                    {/* tab切换 */}
                    <View style={styles.tabContent}>
                        {
                            this.state.tabName == 'Lessons'
                                ?
                                <View style={styles.lessonTabContainer}>
                                    <Lessons LessonsList={this.state.LessonsList} {...this.props} />
                                </View>
                                : null
                        }
                        {this.state.tabName == 'Knowledge' ? 
                         <View style={styles.KnowledgeDetailContainer}>
                            <KnowledgeDetail dataList={this.state.KnowledgeList} {...this.props} />
                         </View>
                         : null}
                    </View>
                    {/* <SlideMenus ref="SlideMenus"/>  */}
                    {/* 解决遮住底部栏的高度 */}
                    {/* loadMore */}
                    {this.state.tabName && <View>
                        {
                            this.state.tabName == 'Lessons'
                                ? (<View style={styles.loadMore}>
                                    {this.state.isLoading ? <Text style={styles.loadMoreText}>正在加载中...</Text> : <Text style={styles.loadMoreText}>{this.state.LessonsList.length == 0 ? '暂无数据' : (this.state.LessonsList.length == cacheData[this.state.tabName].total ? '已经全部加载完毕' : '')}</Text>}
                                </View>) : (<View style={styles.loadMore}>
                                    {this.state.isLoading ? <Text style={styles.loadMoreText}>正在加载中...</Text> : <Text style={styles.loadMoreText}>{this.state.KnowledgeList.length == 0 ? '暂无数据' : (this.state.KnowledgeList.length == cacheData[this.state.tabName].total ? '已经全部加载完毕' : '')}</Text>}
                                </View>)
                        }
                    </View>}

                    {/* 没有数据 */}
                    {/* {this.state.noData ? <View style={styles.noData}><Text style={styles.noDataText}>暂无数据</Text></View> : null} */}
                    {/* 没有数据 end */}

                    {/* loadMore */}
                    {/* <BottomBarLimit /> */}
                </ScrollView>
            </View>
        )
    }

    _onScroll(event) {
        if (this.state.isLoading || (this.state.tabName == "Lessons" && !this.hasMoreLessons() || (this.state.tabName == "Knowledge" && !this.hasMoreKnowledge()))) {
            return;
        }
        let y = event.nativeEvent.contentOffset.y;
        let height = event.nativeEvent.layoutMeasurement.height;
        let contentHeight = event.nativeEvent.contentSize.height;
        if (y + height >= contentHeight - 30) {
            this.setState({
                isLoading: false
            }, () => {
                cacheData[this.state.tabName].nextPage = cacheData[this.state.tabName].nextPage + 1;
                this._fetchData()
            });

        }
    }
    _onRefresh() {
        var That = this;
        global.log(this.state, '------');
        cacheData = {
            [this.state.tabName]: {
                data: [],
                total: 0,
                nextPage: 1
            }
        }
        this.setState({
            [this.state.tabName + 'List']: [],
            [this.state.tabName + 'More']: false,
            isRefreshing: true
        }, () => {
            That._fetchData();
        })
    }
    hasMoreLessons() {
        global.log(this.state.LessonsList.length, cacheData[this.state.tabName].total, 'this.state.LessonsList.length, cacheData[this.state.tabName].total')
        if (this.state.LessonsList.length == cacheData[this.state.tabName].total && cacheData[this.state.tabName].total > 0) {
            this.setState({
                LessonsMore: false
            })
            return false
        }
        return true
        // 
    }
    hasMoreKnowledge() {
        if (this.state.KnowledgeList.length == cacheData[this.state.tabName].total && cacheData[this.state.tabName].total > 0) {
            this.setState({
                KnowledgeMore: false
            });
            global.log('Knowledge ---- -more');
            return false
        }
        return true
    }
}
class SlideContent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectSectionId: '',
            selectSubjectId: '',
            studySection: [],
            studySubject: [],
            treeData: [],
            selectKnowgeList: [],
            loadingTree: false
        }
    }
    resetState() {
        this.setState({
            selectSectionId: '',
            selectSubjectId: '',
            treeData: [],
            selectKnowgeList: []
        })
    }
    componentDidMount() {
        var listPeriodPromise = new Promise((resolve, reject) => {
            listPeriod({}).then(res => {
                resolve(res);
            });
        })
        var listSubjectPromise = new Promise((resolve, reject) => {
            listSubject({}).then(res => {
                resolve(res);
            });
        })
        Promise.all([listPeriodPromise, listSubjectPromise]).then(res => {
            this.setState({
                studySection: res[0],
                studySubject: res[1]
            });
        })
    }
    handleTreeData(data, level = 1) {
        var res = data.map((item) => {
            if (item.children) {
                var childrenData = this.handleTreeData(item.children, level + 1)
            }
            return {
                key: item.id,
                label: item.tagName,
                children: childrenData,
                level
            }
        });
        return res;
    }
    render() {
        // treeData
        return (
            <View style={[{ flex: 1, backgroundColor: '#fff', paddingBottom: 40 }, styles.isiOs]}>
                <ScrollView style={{ flex: 1, paddingTop: 0, backgroundColor: '#fff' }}
                    showsVerticalScrollIndicator={false}
                >
                    <View style={styles.tagWrapperTop1}>
                        <Text style={styles.searchTag}>学段</Text>
                        <View style={styles.searchTagWrapper}>
                            {
                                this.state.studySection.map(item => {
                                    return (
                                        <TouchableOpacity key={item.P_ID} style={styles.searchTagTextLabel} onPress={() => this.selectSection(item.P_ID)}>
                                            <Text style={styles.searchTagText}>{item.S_NAME}</Text>
                                            {this.state.selectSectionId == item.P_ID ? <Image style={styles.searchTagActive} source={require('../../assets/imgs/selectTag.png')} /> : null}
                                        </TouchableOpacity>
                                    )
                                })
                            }

                        </View>
                    </View>
                    <View style={styles.tagWrapperTop2}>
                        <Text style={styles.searchTag}>学科</Text>
                        <View style={styles.searchTagWrapper}>
                            {
                                this.state.studySubject.map(item => {
                                    return (
                                        <TouchableOpacity key={item.P_ID} style={styles.searchTagTextLabel} onPress={() => this.selectSubject(item.P_ID)}>
                                            <Text style={styles.searchTagText}>{item.S_NAME}</Text>
                                            {this.state.selectSubjectId == item.P_ID ? <Image style={styles.searchTagActive} source={require('../../assets/imgs/selectTag.png')} /> : null}
                                        </TouchableOpacity>
                                    )
                                })
                            }
                        </View>
                    </View>
                    {

                        this.props.tabName == 'Knowledge' ? <View>
                            <View style={styles.tagsContainerWrapper}>
                                {this.state.selectKnowgeList.length > 0 && <View style={styles.tagsWrapperTitle}>
                                    <Text style={styles.tagsWrapperTitleText}>选择的知识点:</Text>
                                </View>}
                                <View style={styles.tagsWrapper}>
                                    {
                                        this.state.selectKnowgeList.map(item => {
                                            return <View style={styles.tagView} key={item.key}>
                                                <Text style={styles.tagText}>{item.label}</Text>
                                                {/* <Image /> */}
                                            </View>
                                        })
                                    }
                                </View>
                            </View>
                            {this.state.treeData.length > 0 && <View style={styles.treeWrapper}>
                                <Tree ref="treeComponent" checkable={true} onSelect={this.handleTreeSelect.bind(this)} nodeStyle={{ fontSize: setHW(26), paddingLeft: 2, paddingRight: 1, paddingTop: 1, paddingBottom: 1, flexDirection: 'row', flexWrap: 'wrap'}} defaultExpandAll={true} iconSize={16} expandIconSize={14} multiple={true} showLine={true} treeData={this.state.treeData} />
                            </View>}
                        </View>
                            : null
                    }
                    <View style={{alignItems: 'center'}}>
                        {
                            this.state.loadingTree && <ActivityIndicator
                                animating={true}
                                color='#FF8A00'
                                style={{
                                    marginTop: 10,
                                    width: 20,
                                    height: 20,
                                }}
                                size="small"/>
                        }
                    </View>
                </ScrollView>
                <TouchableWithoutFeedback onPress={() => { this.handleSearch() }}>
                    <View
                        style={styles.sureBtn}
                    >
                        <Text style={styles.sureText}>确定</Text>
                    </View>
                </TouchableWithoutFeedback>
                
            </View>
        )
    }
    /**
     * 获取选择的知识点
     */
    handleTreeSelect(selectedKeys, ev) {
        global.log(ev.selectedNodes, ev, '---tree data');
        var data = ev.selectedNodes;
        // console.log(this.refs,'treeComponent');
        if (this.state.selectKnowgeList.length > 3) {
            // alert('知识')
        }
        // console.log(selectedKeys,'-------', ev);
        this.setState({
            selectKnowgeList: this.formataTreeData(data)
        })
    }
    formataTreeData(ary, type=1) {
        var resultAry = [];
        if (ary.length != 1&&type==1) {
            for (var i = 0; i < ary.length; i++) {
                var cur = ary[i];
                if (!cur.children) {
                    // console.log(cur,'----------------cur')
                    // resultAry.push(cur);
                    if (!resultAry.some((item, index) => {
                        return item.key == cur.key
                    })) {
                        resultAry.push(cur);
                    }
                }
                else {
                    this.formataTreeData(cur.children, 1)
                }
            }
        }
        else {
            for (var i = 0; i < ary.length; i++) {
                var cur = ary[i];
                if (cur.children) {
                    resultAry = resultAry.concat(this.formataTreeData(cur.children, 2))
                }
                else {
                    if (!resultAry.some((item, index) => {
                        return item.key == cur.key
                    })) {
                        resultAry.push(cur);
                    }
                }
            }
            // console.log(this.refs.treeComponent)
            if (this.refs.treeComponent && this.refs.treeComponent.state){
                var res = [];
                // console.log(resultAry, 'resultAry resultAry resultAry resultAry');
                for (var i = 0; i < resultAry.length; i++) {
                    if (this.refs.treeComponent.state.selected[resultAry[i].key]){
                        res.push(resultAry[i])
                    }
                }
                // console.log(res, 'res res res res');
                resultAry = res;
            }
        }
        
        return resultAry;
    }

    getListTag(json) {
        global.log('getListTag--------')
        this.setState({
            treeData: [],
            loadingTree: true
        });
        listTag(json).then(res => {
            var aryTag = this.handleTreeData(res.content);
            this.setState({
                treeData: aryTag,
                loadingTree: false
            })
        })
    }
    selectSection(id) {
        if(this.state.selectSectionId==id) {
            this.setState({
                selectSectionId: '',
                treeData: [],
                selectKnowgeList: []
            },()=>{
                var data = {
                    "PERIODID": id,
                    "SUBJECTID": this.state.selectSubjectId
                }
            });
        }
        else {
            this.setState({
                selectSectionId: id,
                treeData: [],
                selectKnowgeList: []
            },()=> {
                var data = {
                    "PERIODID": id,
                    "SUBJECTID": this.state.selectSubjectId
                }
                this.props.tabName == 'Knowledge' && this.state.selectSubjectId && this.getListTag(data);
            });
        }
    }
    selectSubject(id) {
        if(this.state.selectSubjectId == id) {
            this.setState({
                selectSubjectId: '',
                treeData: [],
                selectKnowgeList: []
            }, ()=>{
                var data = {
                    "PERIODID": this.state.selectSectionId,
                    "SUBJECTID": id
                }
            });
        }
        else {
            this.setState({
                selectSubjectId: id,
                treeData: [],
                selectKnowgeList: []
            }, () => {
                var data = {
                    "PERIODID": this.state.selectSectionId,
                    "SUBJECTID": id
                }
                this.props.tabName == 'Knowledge' && this.state.selectSectionId && this.getListTag(data);
            });
        }
    }
    handleSearch() {
        var data = {
            F_PERIOD_ID: this.state.selectSectionId,
            SUBJECT: this.state.selectSubjectId,
            TAGNAME: this.state.selectKnowgeList
        }
        if (this.props.tabName == 'Knowledge' && !this.state.selectKnowgeList.length) {
            // Toast.message('请选择知识点');
            // return;
        }
        this.props.handleSearch && this.props.handleSearch(data)
    }
}
export default class LessonSearchpage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            tabName: 'Lessons',
            SUBJECT: '',
            PERIODNAME: '',
            TAGNAME: [],
            F_PERIOD_ID: ''
        }
        global.log(this, 'drawerContent')
    }
    openDrawer = () => {
        this._drawer.open();
    }
    setTabName = (tabName) => {
        this.setState({
            tabName: tabName
        })
    }
    handleSearch = (data) => {
        this.setState({
            ...data
        }, () => {
            this.refs.drawerContent && this.refs.drawerContent.upDateFilter(data)
        })
    }
    resetState = () => {
        this.setState({
            TAGNAME: [],
            SUBJECT: '',
            F_PERIOD_ID: ''
        });
        this.refs.SlideContent.resetState && this.refs.SlideContent.resetState();
    }
    render() {
        return (
            <Drawer
                type='overlay'
                side="right"
                open={false}
                ref={(ref) => this._drawer = ref}
                content={<SlideContent ref="SlideContent" handleSearch={this.handleSearch} tabName={this.state.tabName} />}
                tapToClose={true}
                panOpenMask={0.18}
                openDrawerOffset={0.18} // 20% gap on the right side of drawer
                panCloseMask={0.18}
                styles={drawerStyles}
                closedDrawerOffset={0}
                tweenHandler={(ratio) => ({ main: { opacity: (2 - ratio) / 2 } })}>
                <DrawerContent resetState={this.resetState} F_PERIOD_ID={this.state.F_PERIOD_ID} SUBJECT={this.state.SUBJECT} PERIODNAME={this.state.PERIODNAME} TAGNAME={this.state.TAGNAME} openDrawer={this.openDrawer} setTabName={this.setTabName} ref="drawerContent"  {...this.props} />
            </Drawer>
        )
    }
}
const drawerStyles = {
    drawer: {},  // shadowColor: '#000000', shadowOpacity: 0.8, shadowRadius: 3 
    main: { paddingLeft: 0},
};
const styles = StyleSheet.create({
    appContainer: {
        flex: 1,
        backgroundColor: "#fff"
    },
    backIcon: {
        position: 'absolute',
        left: - setHW(12),
    },
    headerContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        height: setHW(88),
        paddingLeft: setHW(20),
        paddingRight: setHW(20)
    },
    eCourseContainer: {
        height: width / setHW(1500) * setHW(440),
    },
    navigatorBar: {
        backgroundColor: '#fff'
    },
    // 导航
    navWrapper: {
        flexDirection: 'row',
        paddingTop:  setHW(40),
        paddingLeft: setHW(84),
        paddingRight: setHW(84),
        paddingBottom: setHW(40),
        backgroundColor: 'white'
    },
    // 搜索页面
    searchWrapper: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        backgroundColor: '#fff',
        padding: setHW(16),
        borderBottomWidth: 0.5,
        borderBottomColor: '#ddd'
    },
    searchIcon: {
        width: setHW(28),
        height: setHW(28),
        marginLeft: setHW(20),
        marginRight: setHW(8)
    },
    searchInput: {
        width: width - setHW(160),
        height: setHW(72),
        backgroundColor: '#F7F7F9',
        borderRadius: setHW(54),
        flexDirection: 'row',
        alignItems: 'center',
        marginLeft: setHW(14)
    },
    textInputStyle: {
        width: width - setHW(160),
        height: setHW(72),
        fontSize: setSpText(26),
        color: '#666',
    },
    filterSort: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    screenText: {
        fontSize: setHW(28)
    },
    dropDownIcon: {
        width: setHW(28),
        height: setHW(28),
    },
    // 
    tabWrapper: {
        flexDirection: 'row',
        height: setHW(90),
        backgroundColor: '#fff',
        justifyContent: 'center',
        alignItems: 'center',
    },
    tabNavItem: {
        width: setHW(240),
        height: setHW(54),
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems:'center',
    },
    tabNavItemText: {
        color: '#333',
        paddingBottom: setHW(10),
        fontSize: setSpText(32)
    },
    textActive: {
        color: '#FF9920',
        fontWeight: 'bold'
    },
    tabContent: {
        paddingTop:setHW(20),
    },
    lessonTabContainer: {
        paddingLeft: setHW(30),
        paddingRight: setHW(30),
    },
    KnowledgeDetailContainer:{
        backgroundColor:'#F7F7F9',
    },
    commandLessons: {
        marginTop: setHW(20),
        flexDirection: 'row',
    },
    // ListView  
    tabContainer: {
        flex: 1,
        height: setHW(88),
        borderBottomColor: '#eeeeee',
        borderBottomWidth: 1,
        borderTopColor: '#eeeeee',
        borderTopWidth: 1,
        backgroundColor: '#FAFAFA',
    },
    contentStyle: {
        flex: 1,
        flexDirection: 'row',
    },
    isiOs: {
        paddingTop: Platform.OS == 'ios' ? setHW(40) : 0
    },
    itemTab: {
        justifyContent: 'center',
        height: setHW(88),
        paddingLeft: setHW(12),
        paddingRight: setHW(12),
    },
    //选中状态
    itemActiveTab: {
        borderBottomWidth: setHW(6),
        borderBottomColor: '#2766cf'
    },
    itemText: {
        color: '#757575',
        fontSize: setSpText(28),
    },
    itemActiveText: {
        color: '#2766cf',
        fontSize: setSpText(28),
        fontWeight: '700'
    },
    tabBtn: {
        width: setHW(80),
        height: setHW(88),
        backgroundColor: '#FAFAFA',
        borderLeftWidth: 1,
        borderLeftColor: '#eeeeee',
        borderBottomColor: '#eeeeee',
        borderBottomWidth: 1,
        borderTopColor: '#eeeeee',
        borderTopWidth: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    tabBtnIcon: {
        width:setHW(32),
        height:setHW(32)
    },
    // tagWrapperTop
    searchTag: {
        fontSize: setSpText(28)
    },
    searchTagWrapper: {
        flexDirection: 'row',
        flexWrap: 'wrap'
    },
    searchTagTextLabel: {
        width: setHW(148),
        height: setHW(72),
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F7F7F9',
        marginRight:  setHW(16),
        marginTop:  setHW(12)
    },
    searchTagText: {
        fontSize: setHW(28)
    },
    tagText: {
        fontSize: setHW(28)
    },
    searchTagActive: {
        width:  setHW(40),
        height:  setHW(40),
        position: 'absolute',
        bottom: 0,
        right: 0
    },
    tagWrapperTop1: {
        paddingLeft:  setHW(24),
        marginTop:  setHW(24),
    },
    tagWrapperTop2: {
        marginTop:  setHW(20),
        paddingLeft:  setHW(24),
    },
    // tree
    sureBtn: {
        width: '100%',
        height:  setHW(80),
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#FF8A00',
        position: 'absolute',
        bottom: 0,
        right: 0
    },
    sureText: {
        color: '#fff',
        fontSize: setSpText(36),
    },
    line: {
        width:setHW(48),
        height: setHW(6),
        backgroundColor: '#fff',
        borderRadius:setHW(4),
        position: 'absolute',
        bottom: 0,
    },
    lineActive: {
        backgroundColor: '#FF8A00',
    },
    // tagsWrapper
    tagsContainerWrapper: {
        paddingLeft: setHW(24),
    },
    tagsWrapperTitle: {
        marginTop: setHW(16),
        marginLeft: setHW(4),
        marginBottom: setHW(8),
    },
    tagsWrapperTitleText: {
        fontSize: setSpText(28)
    },
    tagsWrapper: {
        flexDirection: 'row',
        flexWrap: 'wrap',
    },
    tagView: {
        paddingRight:1,
        paddingLeft: 1,
        height: setHW(44),
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#f7f7f7',
        marginTop: setHW(6),
        marginLeft: setHW(4)
    },
    loadMore: {
        flexDirection: 'row',
        justifyContent: 'center',
        height: setHW(100),
        alignItems: 'center',
    },
    loadMoreText: {
        color: '#ddd',
    },
    noData: {
        alignItems: 'center'
    },
    noDataText: {
        color: '#ddd'
    }
});